<template>
  <div>
    <div class="hedlistbtn">
      <div class="headbtn">
        <a-button type="primary" class="editable-add-btn" @click="handleAdd">发布特价</a-button>
      </div>
      <div class="head_search">
        <div class="sele">
          <a-input placeholder="请输入型号或品牌" v-model="xlpp" @change="xlchange" style="width: 200px" />
          <a-icon type="search" class="search" />
        </div>
      </div>
    </div>
    <div class="tjgl">
      <div>
        <div class="hydj" v-if="$store.state.tjwz">
          <fbtj class="hydj_xgym"></fbtj>
        </div>
        <a-table
          @change="tejiaList"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="pagination"
          :columns="columns"
        >
          <tr slot="expandedRowRender" slot-scope="record">
            <span class="xj">
              <img v-for="(item,i) in record.pic" :key="i" :src="`http://yb.bearing.cn/`+item" alt />
            </span>
            <span class="xj">
              <span class="spantit">备注内容：</span>
              {{record.bz}}
            </span>
          </tr>
            
   <template slot="kgsl" slot-scope="text, record">
                <div>
                  <span style="color:red;">{{record.kgsl}}</span> {{record.jldw}}
                </div>
    </template>
             <template slot="xsjg" slot-scope="text, record">
                <div>
                  <span style="color:red;">{{record.xsjg}}</span>
                </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span>
                <a class="del" @click="() => edit(record,record.key)">修改</a>

                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗?"
                  class="cz"
                  @confirm="() => onDelete(record.id_num,record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
                <a @click="() => refresh(record.id_num,record.key)">刷新</a>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import fbtj from "../fbtj/fbtj.vue";

const dataSource = [];
const columns = [
  {
    title: "发布时间",
    dataIndex: "zdrq",
    scopedSlots: { customRender: "zdrq" }
  },
  {
    title: "型号",
    dataIndex: "xl",
    scopedSlots: { customRender: "xl" }
  },
  {
    title: "品牌",
    dataIndex: "sccjc",
    scopedSlots: { customRender: "sccjc" }
  },
  {
    title: "价格",
    dataIndex: "xsjg",
    scopedSlots: { customRender: "xsjg" }
  },
  {
    title: "可供数量",
    dataIndex: "kgsl",
    scopedSlots: { customRender: "kgsl" }
  },

  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  inject: ["reload"],
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));

    return {
      dataSource,
      columns,
      //count: 2,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      loading: true,
      xlpp: ""
    };
  },
  methods: {
  

    xlchange(e) {
      this.xlpp = e.target.value;
      this.tejiaList(this.pagination,this.xlpp);
    },
    //刷新
    refresh(id, key) {
      this.axios
        .post(
          "tejia/TejiaListRefresh.php",
          qs.stringify({
            id_num: id
          })
        )
        .then(res => {
         
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.reload();
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    //删除
    onDelete(id, key) {
      this.axios
        .post(
          "tejia/TejiaListDelete.php",
          qs.stringify({
            id_num: id
          })
        )
        .then(res => {
          //console.log(res);
          if (res.data.code == 303) {
            //删除成功,总条数减1
            this.pagination.total = this.pagination.total - 1;
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    handleAdd() {
      this.$store.state.tjwz = true;
      this.$store.state.xgtj = false;
    },

    //特价--列表
    tejiaList(pagination,ggpp) {
      this.axios
        .post(
          "tejia/TejiaList.php",
          qs.stringify({
            pageSize: pagination.defaultPageSize,
            phone: this.$store.state.bbl_phone,
            sqdwid: this.$store.state.bbl_sqdwid,
            page: pagination.current,
            ggpp:ggpp
          })
        )
        .then(res => {
       
          this.loading = false;
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
           
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].key = i;
              this.dataSource[i].pic = res.data.result.data[i].pic.split(",");
            }
            console.log(this.dataSource);
          } else {
            this.dataSource = [];
          }
        });
    },

    
    //修改
    edit(value, key) {
      console.log(value,key);
      this.$store.state.tjwz = true;
      this.$store.state.tjdata = value;
      this.$store.state.xgtj = true;
    }
    
  },
  components: {
    fbtj
  },
  created() {
    this.tejiaList(this.pagination);
  }
};
</script>

<style lang='less' scoped>
.hedlistbtn {
  position: relative;
  top: 65px;
  width: 98%;
  left: 1%;
  height: 60px;
  background-color: #fff;
  text-align: left;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 10px;
  .head_search {
    .sele {
      position: relative;
      display: inline-block;
      margin: 0 10px;
      i {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 16px;
      }
    }
  }
}

.tjgl {
  width: 98%;
  height: auto;
  position: relative;
  top: 80px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;
  .xj {
    img {
      width: 60px;
      height: 60px;
      margin: 0 6px;
      border: 1px solid #ccc;
    }
  }
  .hydj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    height: 930px;

    .fbtj_box .fbtj .fbtj_inp ul li .fbtj_form1 {
      width: 66% !important;
    }
    .hydj_xgym {
      position: absolute;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
      .tjgl_fbtj {
        width: 70% !important;
      }
    }
  }

  .gj_wzfl {
    padding: 0 20px;
  }

  //   .glfltit {
  //     width: 100%;
  //     height: 72px;
  //     padding: 25px 35px;
  //     display: flex;
  //     justify-content: space-between;
  //     line-height: 20px !important;
  //     border-bottom: 1px solid #ccc;
  //     h3 {
  //       font-size: 18px;
  //     }
  //     .anticon-close {
  //       font-weight: normal;
  //       font-size: 22px;
  //     }
  //   }
  .addwzfl {
    display: flex;
    justify-content: space-between;

    .addwzfl_tit {
      font-size: 14px;
    }
  }

  .editable-add-btn {
    margin: 15px 20px;
  }

  .button {
    margin: 15px 0;
  }

  .editable-add-btn:hover {
    background-color: #1890ff;
    border: 0 !important;
    color: #fff !important;
  }

  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }

  .ant-input {
    width: 70% !important;
  }
}
</style>
